<template lang="pug">
  master-layout
    div.information-w(slot="main")
      logo.logo
      div.banner
        div.item(v-for="(item,idx) in items" v-bind:key="idx" v-bind:class="`item-${idx+1}`")
          div.icon
          div.item-w
            div.title {{item.title}}
            div.text {{item.text}}
      div.main-w
        div.text 欢迎进入吉林省高等教育自学考试系统
        div.txt(v-if="ts")
          span 距离考试开始还有 {{ts}}
        div.exam-btn(v-bind:class="isBegin?'active':''" v-on:click="handlerClickBeginExam") 答题
        div(v-if="false")
          el-button(@click="createWindow") 悬浮窗口
          el-button(@click="hideWindow") 隐藏窗口
</template>

<script type="text/ecmascript-6">
  import MasterLayout from '../layout/Master'
  import Logo from '../components/Logo'
  import {countdown, dateFormat} from '../config/utils'

  export default {
    components: {
      MasterLayout,
      Logo
    },
    data() {
      return {
        examBeginTime: `2019/03/06 15:01:40`, // 考试开始时间
        currentServerTime: null,
        m: {},
        isBegin: false,
        stuInfo: {},
        items: [
          {
            title: '姓名',
            text: ''
          },
          {
            title: '身份证',
            text: ''
          },
          {
            title: '考试科目',
            text: ''
          },
          {
            title: '考试时间',
            text: ''
          }
        ]
      }
    },
    mounted() {
      console.log('/* 111 */ Q StudentInfo')
      this.getStuInfo()
    },
    methods: {
      createWindow() {
        this.$electron.ipcRenderer.send('showSuspensionWindow')
      },
      hideWindow() {
        this.$electron.ipcRenderer.send('hideSuspensionWindow')
      },
      getStuInfo() {
        let _stuInfo = this.$KalixCatch.get('STUDENT_INFO')
        if (_stuInfo) {
          this.stuInfo = JSON.parse(_stuInfo)
          this.items[0].text = this.stuInfo.userName
          this.items[1].text = this.stuInfo.idCards
          this.items[3].text = this.stuInfo.examTimeStr
          this.items[2].text = this.stuInfo.subject
          this.getServerTime()
        }
      },
      async getServerTime() {
        let {status, data} = await this.$http.get('/camel/rest/currentDates')
        if (status === 200) {
          this.currentServerTime = (new Date(data)).getTime()
          this.chk()
        }
      },
      chk() {
        let mt = null
        let tt = this.stuInfo.examStart - this.currentServerTime
        // console.log('this.stuInfo.examStart', this.stuInfo.examStart)
        // console.log('this.currentServerTime', this.currentServerTime)
        // console.log('tt', tt)
        // console.log(tt)
        if (tt > 0) {
          let timer1 = Math.floor(tt / 1000)
          if (timer1) {
            countdown(mt, (_mt) => {
              timer1 -= 1
              this.m = dateFormat(timer1)
              if (timer1 <= 0) {
                this.isBegin = true
                clearInterval(_mt)
              }
            })
          }
        } else {
          this.isBegin = true
        }
      },
      handlerClickBeginExam() {
        if (this.isBegin) {
          this.updateExam()
          this.$router.push({name: 'Question'})
        } else {
          this.$KalixMessage.error('尚未开始考试！')
        }
      },
      async updateExam() {
        let res = await this.$http.request({
          method: 'PUT',
          url: `/camel/rest/examings/updateexamstart`
        })
        console.log('updateExam res', res)
      }
    },
    computed: {
      ts() {
        let strHH = this.m.hh > 0 ? this.m.hh + '小时' : ''
        let strMM = this.m.mm > 0 ? this.m.mm + '分' : ''
        let strSS = this.m.ss > 0 ? this.m.ss + '秒' : ''
        let strDD = this.m.dd > 0 ? this.m.dd + '天' : ''
        let str = strDD + strHH + strMM + strSS
        return str.length > 0 ? str : null
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .information-w
    background-color #ffffff
    width 1000px
    height 600px
    box-shadow 0px 6px 16px rgba(0, 0, 0, .2)
    margin 52px auto 0
    overflow hidden
    padding 16px
    user-select none
    cursor default

    .logo
      margin-top 21px

    .banner
      display flex
      margin-top 21px

      .item
        display flex
        border 1px solid #000000
        height 85px
        width 241px
        align-items center

        .icon
          width 85px
          height 55px
          background 50% 50% no-repeat

        .item-w
          flex 1

          .title
            font-size 24px
            color #010101

          .text
            font-size 14px
            color #767676

        &.item-1
          border-color #5cb85c

          .icon
            background-image url("../assets/images/icon-1.png")

        &.item-2
          border-color #74a3ff

          .icon
            background-image url("../assets/images/icon-2.png")

          .item-w
            .text
              font-size 12px

        &.item-3
          border-color #f7ba51

          .icon
            background-image url("../assets/images/icon-3.png")

        &.item-4
          border-color #56d8c8

          .icon
            background-image url("../assets/images/icon-4.png")

        & + .item
          margin-left 10px

    .main-w
      background-color #dff0d8
      margin-top 23px
      border-radius 4px
      height 330px
      display flex
      flex-direction column
      align-items center
      justify-content center

      .text
        font-size 18px
        color #3c763d

      .txt
        margin-top 18px
        font-size 16px
        margin-bottom -20px

      .exam-btn
        margin-top 35px
</style>
